<template>
  <v-page disable-scroll background="#f5f6fa" footer-background="white">
    <template #header>
      <!-- <view class="page-background" /> -->
      <v-navbar
        title="我的"
        background-color="transparent"
        color="black"
        icon-color="white"
        :border="true"
        :hidden-icon="true"
      />
    </template>
    <template #default>
      <view class="user-pad">
        <view class="user-box">
          <!-- :style="{
            backgroundImage: `url(${'https://img.yzcdn.cn/vant/cat.jpeg'})`,
          }" -->
          <view class="user-avatar">
            <v-image
              height="96rpx"
              width="96rpx"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
              mode="aspectFill"
            />
          </view>
          <view class="user-name">
            用户名
          </view>
        </view>
        <!-- <wd-icon
          name="arrow-right"
          size="24rpx"
          color="#333333"
        /> -->
      </view>
      <view class="order-bar">
        <view class="content">
          <view class="order-item" @click="navigateToOrder('UNPAID')">
            <!-- <v-badge :value="orderCount?.unpaid_num">
            </v-badge> -->
            <view class="order-icon">
              <v-icon
                size="50rpx"
                src="@/static/icons/user-pending-payment.svg"
              />
            </view>
            <view class="order-text">
              我的订单
            </view>
          </view>
          <view class="order-item" @click="navigateToOrder('UNSHIPPED')">
            <!-- <v-badge :value="orderCount?.unshipping_num">
            </v-badge> -->
            <view class="order-icon">
              <v-icon
                size="50rpx"
                src="@/static/icons/user-pending-payment.svg"
              />
            </view>
            <view class="order-text">
              我的菜单
            </view>
          </view>
          <view class="order-item" @click="navigateToOrder('TO_BE_COMMENT')">
            <view class="order-icon">
              <v-icon
                size="50rpx"
                src="@/static/icons/user-pending-payment.svg"
              />
            </view>
            <view class="order-text">
              我的钱包
            </view>
          </view>
          <view class="order-item" @click="navigateToTool()">
            <view class="order-icon">
              <v-icon
                size="50rpx"
                src="@/static/icons/user-pending-payment.svg"
              />
            </view>
            <view class="order-text">
              设置
            </view>
          </view>
        </view>
      </view>
      <view class="hidden">
        <live-product-details />
      </view>
    </template>
  </v-page>
</template>

<script setup lang="ts">
// const userStore = $store.user();

// const orderCount = ref<RecentlyOrderVO>();
// const getOrderCount = async () => {
//   const response = await $api.getOrderQueryNumber();
//   switch (response.__error) {
//     case undefined:
//       orderCount.value = response.data as RecentlyOrderVO;
//   }
// };
// onShow(getOrderCount);
const navigateToOrder = (status: string) => {
  uni.navigateTo({ url: `/pages/order/order-page?status=${status}` });
};

const navigateToTool = () => {
  uni.navigateTo({ url: '/pages/tool/cost-page' });
};
</script>

<style lang="scss" scoped>
.page-background {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 438rpx;
  background: linear-gradient(
    180deg,
    rgba(255, 47, 59, 0.16) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.user-pad {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin: 0 24rpx;
  position: relative;
  overflow: hidden;
  border-radius: 40rpx;
  padding: 56rpx 0 38rpx;

  &::before {
    width: 100%;
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(https://img.yzcdn.cn/vant/cat.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(8rpx);
    z-index: 0;
  }

  .user-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26rpx;
    z-index: 1;
  }
  .user-avatar {
    border-radius: 50%;
    overflow: hidden;
    border: 4rpx solid var(--primary-color);
  }
  .user-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    font-size: 24rpx;
    color: #ffffff;
    font-weight: bold;
    // padding: 28rpx;
  }
}
.order-bar {
  padding: 32rpx 60rpx;
  box-sizing: border-box;
  margin: 0 24rpx;
  gap: 8px;
  border-radius: 56rpx;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  margin-top: -80rpx;
  padding-top: calc(80rpx + 54rpx);
  font-size: 24rpx;

  .content {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    .order-item {
      width: 110rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .order-text {
        margin-top: 24rpx;
      }
    }
    .order-icon {
      width: 88rpx;
      height: 88rpx;
      background-color: var(--primary-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
  }
}
.hidden {
  display: none;
}
</style>
